<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="EduBot,教育小助手,个人中心管理,郑恩赐技术团队,教育AI平台,教学监测系统,用户信息管理,教育技术专家,深度学习应用,教学评估系统,教育大数据分析,智能课堂管理,异常行为检测">
    <meta name="description" content="EduBot个人中心，为教育工作者提供账户信息管理，支持用户名修改、密码更新等功能，确保系统安全性和个性化体验">
    <title>EduBot - 个人中心</title>
    <link rel="icon" type="image/png" href="static/icons/AiKeTangJiaoXuePingCeXiTong.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootbox.js/6.0.0/bootbox.min.js"></script>
    <script src="../../static/javascripts/PersonalCenter.js"></script>
</head>
<body>
    <h1 style="display: none;">EduBot - 个人中心</h1>
    <div class="toast-container" id="toastContainer"></div>
    <div class="container mt-5">
        <div class="user-name-badge">
            <div class="alert alert-info">
                <i class="fas fa-user me-2"></i>当前用户名：<span id="currentUsername">加载中...</span>
            </div>
        </div>
        <div class="nav-container">
            <button class="nav-button" onclick="showChangeUsernameDialog()">
                <i class="fas fa-user-edit"></i>修改用户名
            </button>
            <button class="nav-button" onclick="showChangePasswordDialog()">  
                <i class="fas fa-key"></i>修改密码
            </button>
            <button class="nav-button logout-button" onclick="handleNavigationReturn()">
                <i class="fas fa-arrow-left me-2"></i>返回导航页面
            </button>
        </div>
    </div>

    <div id="messageModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p id="modalMessage"></p>
        </div>
    </div>

    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #0F172A;
            background-image: 
                radial-gradient(circle at 15% 25%, rgba(30, 58, 138, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 85% 75%, rgba(30, 58, 138, 0.15) 0%, transparent 40%);
            color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }
        
        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .container {
            width: 90%;
            max-width: 1200px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .nav-container {
            display: flex;
            flex-direction: row;
            gap: 30px;
            width: 100%;
            max-width: 1000px;
            padding: 40px 0;
            margin: 0 auto;
            box-sizing: border-box;
            height: 40vh;
            align-items: center;
            justify-content: center;
        }

        .nav-button {
            background-color: #03DAC6;
            border: none;
            color: #121212;
            height: 60%;
            min-height: 150px;
            font-size: 20px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            font-weight: 700;
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .nav-button i {
            margin-right: 10px;
        }

        .nav-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
        }

        .nav-button:hover::before {
            left: 100%;
        }

        .nav-button:hover {
            background-color: #018786;
            color: white;
            transform: translateY(-5px);
            box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
        }

        .user-name-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255,255,255,0.1);
            padding: 8px 16px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 1000;
            min-width: 250px;
        }

        .user-name-badge .alert {
            margin-bottom: 0;
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
        }

        /* 自定义bootbox对话框样式 */
        .bootbox.modal {
            background: rgba(0, 0, 0, 0.7);
        }
        
        .custom-modal .modal-content {
            background: transparent;
            border: none;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            overflow: hidden;
        }
        
        .custom-modal .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
        }
        
        .custom-modal .form-control:focus {
            box-shadow: 0 0 0 3px rgba(3, 218, 198, 0.25);
            border-color: #03DAC6;
        }
        
        .bootbox-close-button {
            color: #e0e0e0;
        }

        /* 修改用户名模态框样式 */
        .username-custom-modal.modal-dialog {
            max-width: 75%;
            width: 75%;
            margin: 1.75rem auto;
        }
        
        .username-custom-modal.modal-dialog,
        .username-custom-modal .modal-dialog {
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100% - 3.5rem);
        }
        
        .username-custom-modal .modal-content {
            width: 90%;
            max-width: 1000px;
        }
        
        @media (max-width: 768px) {
            .username-custom-modal.modal-dialog,
            .username-custom-modal .modal-dialog,
            .username-custom-modal .modal-content {
                width: 95%;
                max-width: 95%;
            }
        }
        
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: column;
                height: auto;
            }
            .nav-button {
                width: 100%;
                height: 20vh;
                min-height: 120px;
            }
        }

        .toast-container {
            position: fixed;
            top: 20px;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 9999;
            pointer-events: none;
        }

        .toast-item {
            background: linear-gradient(135deg, #0d2b4acc, #1a1f25ee);
            backdrop-filter: blur(10px);
            border: 1px solid #03dac644;
            border-radius: 8px;
            padding: 12px 20px;
            margin-bottom: 8px;
            box-shadow: 0 4px 12px rgba(0,102,255,0.2), 0 2px 6px rgba(3,218,198,0.15);
            transform: translateY(-100%);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            max-width: 80%;
            display: flex;
            align-items: center;
            pointer-events: auto;
        }

        .toast-item.show {
            transform: translateY(0);
            opacity: 1;
        }

        .toast-item.hide {
            transform: translateY(-50%);
            opacity: 0;
        }

        .toast-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 2px;
            background: #03DAC6;
            width: 100%;
            transform-origin: left;
        }

        .toast-icon {
            margin-right: 10px;
            font-size: 18px;
        }

        .toast-message {
            color: #f0f0f0;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.3;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }

        @media (max-width: 768px) {
            .toast-item {
                max-width: 92%;
                bottom: 20px;
                top: auto;
            }
        }
    </style>

    <script>
        const backEndDomain = '{{ backend_domain_name }}';
        const frontEndDomain = '{{ front_end_domain_name }}';

        function showModalMessage(message) {
            bootbox.alert({
                message: `
                    <div class="modal-content" style="background: linear-gradient(135deg, #0D1117, #1A1F25); border: 1px solid #03DAC6; border-radius: 15px; max-height: 300px;">
                        <div class="modal-body" style="padding: 20px;">
                            <div class="bootbox-body" style="color: #e0e0e0; font-size: 16px; text-align: center;">${message}</div>
                        </div>
                        <div class="modal-footer border-0" style="background: #0D1117; border-radius: 0 0 15px 15px; padding: 15px; border-top: 1px solid #03DAC6;">
                            <button type="button" class="btn d-none bootbox-accept"></button>
                        </div>
                    </div>`,
                buttons: {
                    ok: {
                        label: '',
                        className: 'd-none'
                    }
                },
                callback: function() {
                    setTimeout(function() {
                        bootbox.hideAll();
                    }, 1000);
                }
            });
        }

        function showChangePasswordDialog() {
            bootbox.dialog({
                title: '',
                className: 'modal-dialog-centered custom-modal username-custom-modal',
                size: 'large',
                closeButton: false,
                message: `
                    <div class="username-modal-header" style="background: linear-gradient(135deg, #000C24, #2B0036, #16213e); padding: 25px; border-radius: 15px 15px 0 0; border-bottom: 2px solid #0066FF;">
                        <h5 style="color:#fff; margin: 0; font-weight: 600;"><i class="fas fa-key me-2"></i>修改密码</h5>
                    </div>
                    <div class="username-modal-body" style="padding: 30px; background: linear-gradient(135deg, #0D1117, #1A1F25); color: #e0e0e0;">
                        <form id="passwordForm">
                            <div class="mb-4">
                                <div class="input-group">
                                    <span class="input-group-text" style="background: #0066FF; border: none; color: white;">
                                        <i class="fas fa-lock"></i>
                                    </span>
                                    <input type="password" class="form-control" id="oldPassword" placeholder="当前密码" required
                                         style="background: rgba(255,255,255,0.05); border: 1px solid #0066FF; color: #e0e0e0; padding: 12px;">
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="input-group">
                                    <span class="input-group-text" style="background: #0066FF; border: none; color: white;">
                                        <i class="fas fa-key"></i>
                                    </span>
                                    <input type="password" class="form-control" id="newPassword" placeholder="新密码" required
                                         style="background: rgba(255,255,255,0.05); border: 1px solid #0066FF; color: #e0e0e0; padding: 12px;">
                                </div>
                                <div class="input-hint mt-2" style="color: #03DAC6; font-size: 0.9rem;"><i class="fas fa-info-circle me-1"></i>密码长度不超过32位</div>
                            </div>
                            <div class="mb-4">
                                <div class="input-group">
                                    <span class="input-group-text" style="background: #0066FF; border: none; color: white;">
                                        <i class="fas fa-check-circle"></i>
                                    </span>
                                    <input type="password" class="form-control" id="confirmPassword" placeholder="确认密码" required
                                         style="background: rgba(255,255,255,0.05); border: 1px solid #0066FF; color: #e0e0e0; padding: 12px;">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="username-modal-footer" style="padding: 20px 30px; background: #0D1117; border-top: 2px solid #0066FF; border-radius: 0 0 15px 15px; display: flex; justify-content: space-between;">
                        <button type="button" class="btn" 
                                style="background: rgba(255,255,255,0.1); border:none; color: #e0e0e0; padding: 10px 20px; border-radius: 50px; transition: all 0.3s ease;" 
                                onclick="bootbox.hideAll()">
                            <i class="fas fa-times me-2"></i>取消
                        </button>
                        <button type="button" class="btn" 
                                style="background: #03DAC6; border:none; color: #121212; padding: 10px 20px; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(3, 218, 198, 0.3);" 
                                onclick="submitPasswordChange()">
                            <i class="fas fa-check me-2"></i>确认修改
                        </button>
                    </div>`,
                onEscape: true,
                backdrop: true
            });
        }

        function showChangeUsernameDialog() {
            bootbox.dialog({
                title: '',
                className: 'modal-dialog-centered custom-modal username-custom-modal',
                size: 'large',
                message: `
                    <div class="username-modal-header" style="width: 100%; background: linear-gradient(135deg, #000C24 0%, #2B0036 50%, #16213e 100%); padding: 20px 0; border-radius: 15px 15px 0 0; position: relative; overflow: hidden;">
                        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 0%, rgba(3,218,198,0.15) 0%, transparent 70%);"></div>
                        <h5 style="color:#fff; margin: 0; font-weight: 600; text-align: center; position: relative; z-index: 1; letter-spacing: 1px;">
                            <i class="fas fa-user-edit me-2" style="color: #03DAC6;"></i>修改用户名
                        </h5>
                        <div style="position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #03DAC6, transparent);"></div>
                    </div>
                    <div class="username-modal-body" style="padding: 30px; background: linear-gradient(135deg, #0D1117, #1A1F25); color: #e0e0e0; border-left: 1px solid rgba(3, 218, 198, 0.2); border-right: 1px solid rgba(3, 218, 198, 0.2);">
                        <form id="usernameForm" style="max-width: 600px; margin: 0 auto;">
                            <div class="mb-4">
                                <div class="input-group dynamic-input" style="box-shadow: 0 4px 15px rgba(0, 102, 255, 0.2); border-radius: 8px; overflow: hidden;">
                                    <span class="input-group-text" style="background: linear-gradient(135deg, #0066FF, #03DAC6); border: none; color: white; min-width: 50px; transition: all 0.3s ease;">
                                        <i class="fas fa-signature"></i>
                                    </span>
                                    <input type="text" class="form-control username-input" id="newUsername" 
                                        placeholder="新用户名" 
                                        style="background: rgba(255,255,255,0.05); border: none; color: #e0e0e0; padding: 15px 20px; transition: all 0.3s ease;">
                                    <span class="input-feedback" style="padding-right: 15px;"></span>
                                </div>
                                <div class="input-hint mt-2" style="color: #03DAC6; font-size: 0.9rem; text-align: center;">
                                    <i class="fas fa-info-circle me-1"></i>请输入 1 - 16 个字符作为新用户名
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="input-group dynamic-input" style="box-shadow: 0 4px 15px rgba(0, 102, 255, 0.2); border-radius: 8px; overflow: hidden;">
                                    <span class="input-group-text" style="background: linear-gradient(135deg, #0066FF, #03DAC6); border: none; color: white; min-width: 50px; transition: all 0.3s ease;">
                                        <i class="fas fa-fingerprint"></i>
                                    </span>
                                    <input type="password" class="form-control password-input" id="confirmUsername" placeholder="验证密码" style="background: rgba(255,255,255,0.05); border: none; color: #e0e0e0; padding: 15px 20px; transition: all 0.3s ease;">
                                    <span class="input-feedback" style="padding-right: 15px;"></span>
                                </div>
                                <div class="input-hint mt-2" style="color: #03DAC6; font-size: 0.9rem; text-align: center;">
                                    <i class="fas fa-info-circle me-1"></i>请输入密码用于校验身份
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="username-modal-footer" style="padding: 25px 30px; background: #0D1117; border-top: 2px solid #03DAC6; border-radius: 0 0 15px 15px; display: flex; justify-content: center; gap: 30px; box-shadow: 0 -5px 15px rgba(0,0,0,0.2);">
                        <button type="button" class="btn" 
                                style="background: rgba(255,255,255,0.1); border:none; color: #e0e0e0; padding: 12px 30px; border-radius: 50px; transition: all 0.3s ease; min-width: 150px; font-weight: 500;" 
                                onclick="bootbox.hideAll()">
                            <i class="fas fa-times me-2"></i>取消
                        </button>
                        <button type="button" class="btn" 
                                style="background: linear-gradient(135deg, #03DAC6, #0066FF); border:none; color: #121212; padding: 12px 30px; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; min-width: 150px; box-shadow: 0 4px 15px rgba(3, 218, 198, 0.4);" 
                                onclick="submitUsernameChange()">
                            <i class="fas fa-check me-2"></i>确认修改
                        </button>
                    </div>`,
                onEscape: true,
                backdrop: true
            });
        }

        function submitPasswordChange() {
            const oldPassword = $('#oldPassword').val();
            const newPassword = $('#newPassword').val();
            const confirmPassword = $('#confirmPassword').val();

            if (oldPassword === newPassword) {
                showToast('新密码不能与旧密码相同', 'error');
                return;
            }

            (async () => {
                try {
                    const result = await changePassword(
                        backEndDomain,
                        localStorage.getItem('token'),
                        oldPassword,
                        newPassword
                    );

                    if (result?.TF === 'T') {
                        localStorage.setItem('token', result.token);
                        showToast(result.message, 'success');
                        bootbox.hideAll();
                    } else {
                        showToast(result?.message || '密码修改失败', 'error');
                    }
                } catch (error) {
                    showToast(`请求异常: ${error.message}`, 'error');
                    console.error('密码修改错误:', error);
                }
            })();
        }

        function validateUsernameInput() {
            const username = $('#newUsername').val().trim();
            const regex = /^[\u4e00-\u9fa5a-zA-Z0-9]{1,16}$/;
            return regex.test(username);
        }

        function validatePasswordInput() {
            const password = $('#confirmUsername').val().trim();
            return password.length >= 6 && password.length <= 32;
        }

        function updateInputStatus(selector, isValid) {
            $(selector).closest('.dynamic-input')
                .toggleClass('valid', isValid)
                .toggleClass('invalid', !isValid)
                .find('.input-feedback')
                .html(isValid ? '' : '<i class="fas fa-times"></i>');
        }

        $(document).on('input', '#newUsername', function() {
            updateInputStatus(this, validateUsernameInput());
        });

        $(document).on('input', '#confirmUsername', function() {
            updateInputStatus(this, validatePasswordInput());
        });

        function submitUsernameChange() {
            const newUsername = $('#newUsername').val().trim();
            const password = $('#confirmUsername').val().trim();

            if (!newUsername || !password) {
                showToast('请填写完整信息', 'error');
                return;
            }

            (async () => {
                try {
                    const result = await changeUsername(
                        backEndDomain,
                        localStorage.getItem('token'),
                        newUsername,
                        password
                    );

                    if (result?.TF === 'T') {
                        localStorage.setItem('token', result.token);
                        $('#currentUsername').text(newUsername);
                        showToast(result.message, 'success');
                        bootbox.hideAll();
                    } else {
                        showToast(result?.message || '用户名修改失败', 'error');
                    }
                } catch (error) {
                    showToast(`请求异常: ${error.message}`, 'error');
                    console.error('API调用错误:', error);
                }
            })();
        }

        function goBackToNavigation() {
            window.location.href = frontEndDomain + '/navigation_page';
        }

        function showToast(message, type = 'info') {
            const container = document.getElementById('toastContainer');
            const toast = document.createElement('div');
            const icons = {
                info: 'ℹ️',
                success: '✅',
                error: '❌',
                warning: '⚠️'
            };
            
            toast.className = 'toast-item';
            toast.innerHTML = `
                <div class="toast-progress"></div>
                <span class="toast-icon">${icons[type] || icons.info}</span>
                <span class="toast-message">${message}</span>
            `;
            
            container.appendChild(toast);
            
            setTimeout(() => {
                toast.classList.add('show');
                
                const progress = toast.querySelector('.toast-progress');
                progress.style.transition = 'transform 1.5s linear';
                progress.style.transform = 'scaleX(0)';
                
                setTimeout(() => {
                    toast.classList.add('hide');
                    setTimeout(() => {
                        toast.remove();
                    }, 200);
                }, 1500);
            }, 10);
            
            if (container.children.length > 3) {
                container.removeChild(container.children[0]);
            }
        }

        function showModalMessage(message) {
            showToast(message, 'info');
        }

        $(document).ready(() => {
            (async () => {
                const token = localStorage.getItem('token');
                const username = await checkToken(backEndDomain, token);
                
                if (!username) {
                    showToast('会话已过期，请重新登录', 'error');
                    setTimeout(() => window.location.href = `${frontEndDomain}/login_register_page`, 1500);
                    return;
                }
                
                $('#currentUsername').text(username);
            })().catch(error => {
                showToast(`用户信息加载失败: ${error.message}`, 'error');
                console.error('初始化错误:', error);
            });
        });
    </script>
</body>
</html>

<script>
function handleNavigationReturn() {
    setTimeout(() => goBackToNavigation(), 1500);
}
</script>

<style>
.logout-button {
    background: linear-gradient(135deg, #ff758c, #ff7eb3);
    box-shadow: 0 4px 15px rgba(255, 117, 140, 0.4);
}

.logout-button:hover {
    background: linear-gradient(135deg, #ff4d6d, #ff6392);
    transform: translateY(-3px) scale(1.02);
}
</style>
    
   